<template>
	<view>
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>

		<view class="content-box">
			<bjx-form class="form" :rules="rules" :form="formData" ref="form">
				<view class="mobile-login">
					<bjx-form-item class="user-login-pwd" label-type="inline" prop="password" label="密码">
						<view slot="label">
							<image class="user-login-pwd-img" src="@/static/images/mima.png" mode=""></image>
						</view>
						<input class="user-login-pwd-content" type="password" value="" placeholder="请输入密码"
							v-model="formData.password" name="password" />
					</bjx-form-item>

					<bjx-form-item class="user-login-pwd" label-type="inline" prop="repassword" label="确认密码">
						<view slot="label">
							<image class="user-login-pwd-img" src="@/static/images/mima.png" mode=""></image>
						</view>
						<input class="user-login-pwd-content" type="password" value="" placeholder="请再次输入密码"
							v-model="formData.repassword" name="repassword" />
					</bjx-form-item>

				</view>
				<view class="login" @tap="confirmSubmit">
					提交
				</view>
			</bjx-form>

		</view>

	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				title: '新登录密码',
				code: '',
				cate: 0,

				formData: {
					password: '',
					repassword: ''
				},
				rules: {
					password: {
						required: true,
						rule: 'type:string|length:6,20',
						message: {
							length: '密码为6-20个字符'
						}
					},
					repassword: {
						required: true,
						rule: 'type:string|length:6,20',
						message: {
							length: '确认密码为6-20个字符'
						}
					}
				}
			}
		},
		components: {

		},
		onLoad(option) {
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}

			this.code = option.code;
			this.cate = uni.getStorageSync('cate');
		},
		methods: {
			...mapMutations(['logout']),

			// 触发提交表单
			confirmSubmit() {
				if (!this.code) {
					this.$api.msg('非法操作！');
					this.logout();
					uni.setStorageSync('token', '')
					uni.setStorageSync('cate', 0)
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 600)
				}
				this.$refs.form.validate(val => {
					if (val == true) {
						for (let i = 0; i < this.formData.password.length; i++) {
							let newWord = this.formData.password.substr(i, 1);
							if (!/[0-9a-zA-Z]/.test(newWord)) {
								this.$api.msg('密码只能输入大小写字母和数字');
								return false;
							}
						}
						if (this.formData.password !== this.formData.repassword) {
							this.$api.msg('登录密码和确认密码不一致！');
							return false;
						}
						let dataObj = {
							token: uni.getStorageSync('token'),
							cate: uni.getStorageSync('cate'),
							code: this.code,
							password: this.formData.password
						};
						this.submit(dataObj);
					}
				})
			},

			//登录提交
			async submit(dataObj) {
				let res = await this.$myRequest({
					url: '/changePwd1',
					data: dataObj,
					methods: 'post'
				})

				if (res.data.status == 1) {
					this.$api.msg(res.data.msg);
					this.logout();
					uni.setStorageSync('token', '')
					uni.setStorageSync('cate', 0)
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/login?cate=' + this.cate
						})
					}, 1500)
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
		font-size: $font-base;
	}
</style>
<style lang="scss" scoped>
	.content-box {
		// #ifdef APP-PLUS
		padding: 210rpx 50rpx 0;
		// #endif

		// #ifdef H5
		padding: 158rpx 50rpx 0;
		// #endif
		
		// #ifdef MP-WEIXIN
		padding: 192rpx 50rpx 0;
		// #endif

		height: 850rpx;
		font-size: $font-base;

		.mobile-login {
			border-top: 1px solid #f3f3f6;
			height: 156rpx;

			.mobile-login-mobile {
				height: 78rpx;
				// line-height: 78rpx;
				padding-left: 30rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #f3f3f6;
				background-color: #fff;

				.mobile-login-mobile-img {
					width: 23rpx;
					height: 35rpx;
					margin-right: 24rpx;
				}


				.mobile-login-mobile-content {
					display: inline-block;
					font-size: $font-base;
				}

			}

			.mobile-login-code {
				height: 78rpx;
				// line-height: 78rpx;
				padding-left: 30rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #f3f3f6;
				background-color: #fff;

				.mobile-login-code-img {
					width: 23rpx;
					height: 35rpx;
					margin-right: 24rpx;
				}

				.get-mobile-code {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;


					.mobile-login-code-content {
						display: inline-block;
						font-size: $font-base;
						width: 60%;
					}

					.mobile-login-code-btn {
						background-color: #ee7f06;
						border-radius: 8rpx;
						color: #fff;
						height: 60rpx;
						line-height: 60rpx;
						padding: 0 10rpx;
						margin-right: 20rpx;
					}
				}

			}

			.user-login-pwd {
				height: 78rpx;
				// line-height: 78rpx;
				padding-left: 30rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #f3f3f6;
				background-color: #fff;

				.user-login-pwd-img {
					width: 32rpx;
					height: 36rpx;
					margin-right: 24rpx;
				}

				.user-login-pwd-content {
					display: inline-block;
					font-size: 30rpx;
				}
			}
		}

		.login {
			margin-top: 60rpx;
			background-color: #f3431a;
			height: 74rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 15rpx;
			color: #fff;
			letter-spacing: 19rpx;
			font-size: 30rpx;
		}

	}
</style>
